<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>营业参数设置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		
		
		<style>
			h5 {
				margin: 5px 7px;
			}
			[v-cloak] {
			  display: none;
			}
						
			.mui-input-row .mui-btn {
			    line-height: 1.1;
			    float: right;
			    width:65%;
			    padding: 10px 15px;
			}
			
			
			#fileMv{width: 40%;box-sizing: border-box;}
	 		#btnMv{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		#fileLogo{width: 40%;box-sizing: border-box;}
	 		#btnLogo{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		#fileShow{width: 40%;box-sizing: border-box;}
	 		#btnShow{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		.mui-btn-outlined {margin-top: 6px;color: #00B4FF;border: 1px solid #00B4FF; }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">营业参数设置</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				
				<form class="mui-input-group" id="fmInput">
					<div class="mui-input-row">
						<label>营业状态:</label>
						<div id="M_Toggle" class="mui-switch {{fmWorkshop.muiactive}}">
					  		<div class="mui-switch-handle"></div>
						</div>
						
					</div>
					<div class="mui-input-row">
						<label>起送金额:</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.delivery_amount" maxlength="20"/>
					</div>
					<div class="mui-input-row">
						<label>配送费用</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.delivery_fee" maxlength="22"/>
					</div>
					
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段1<br/>开始时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimes_1">{{fmWorkshop.worktimes_1+''|converTime}}</button>
					</div>
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段1<br/>结束时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimee_1">{{fmWorkshop.worktimee_1+''|converTime}}</button>
					</div>
					
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段2<br/>开始时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimes_2">{{fmWorkshop.worktimes_2+''|converTime}}</button>
					</div>
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段2<br/>结束时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimee_2">{{fmWorkshop.worktimee_2+''|converTime}}</button>
					</div>
					
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段3<br/>开始时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimes_3">{{fmWorkshop.worktimes_3+''|converTime}}</button>
					</div>
					<div class="mui-input-row" style="height: 60px;" v-cloak>
						<label>营业时段3<br/>结束时间:</label>
						<button data-options='{"type":"time"}' class="btn mui-btn mui-btn-block" vuval="worktimee_3">{{fmWorkshop.worktimee_3+''|converTime}}</button>
					</div>
					
					
					<div class="mui-button-row">
						<button type="button" id="butSave" class="mui-btn mui-btn-primary" >确认</button>&nbsp;&nbsp;
						<button type="button" id="butCancel" class="mui-btn mui-btn-danger" >取消</button>
					</div>
					时间设置为0时，该工作时间段失效
				</form>
				
				
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/mui.picker.min.js"></script>
		<script src="../../js/tools.js"></script>
		<script>
			var theVue;
			
			Vue.filter('converTime', function(value) 
			{
				if(value != undefined && value != "" && value != null)
				{
					var strLeft = value.substring(0,value.length-2);
					var strRight = value.substring(value.length-2,value.length);
					return strLeft+":"+strRight;
				}
				else
				{
					return "请选择时间..";
				}
			});

			
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
				
			window.addEventListener('toggle', function(event) 
			{
				if (event.target.id === 'M_Toggle') 
				{
					var isActive = event.detail.isActive;
					
					if (isActive) {
						theVue.fmWorkshop.state = 1;
					} else {
						theVue.fmWorkshop.state = 0;
					}
				}
			});	
				
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						var picker = new $.DtPicker(options);
						var pObj = this;
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							
							eval("theVue.fmWorkshop."+pObj.getAttribute('vuval')+"= rs.h.value+rs.i.value"); 
							//alert(rs.h.value+rs.i.value);
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			
			document.getElementById("butCancel").addEventListener('tap', function(e) 
			{
				mui.back();
			});
			
					
			
			document.getElementById("butSave").addEventListener('tap', function(e) 
			{
				//alert(theVue.fmWorkshop.state);
				
				//return;
				
				if((!isNumber(theVue.fmWorkshop.delivery_amount)))
				{
					mui.toast("请输入正确起送金额");
					return;
				}
				
				if((!isNumber(theVue.fmWorkshop.delivery_fee)))
				{
					mui.toast("请输入正确的配送费用 ");
					return;
				}
				
				sespost('/zdm/AppApi/Merchant/updateMerchant',
				theVue.fmWorkshop,
				function(retData)
				{
					if(retData.stat == 1)
					{
						mui.toast("保存成功");
						mui.back();
//						mui.openWindow(
//						{
//					     	url: 'index.html', 
//					     	id:'index.html'
//					  	});
					}
					else
					{
						mui.toast("保存失败");
					}
				});
				
				
			});


			mui.plusReady(function() {
//				initNativeObjects();
//				showSoftInput();
			});

		</script>
		
		<script>
		theVue = new Vue({
		    el:'#fmInput',
		    methods:{
		        fnsubmit:function()
		        {
		        
		        },
		        loadWorkInfo:function()
		        {
		        	
		        }
		    },
		    data:
		    {
		    		priceNew:0,
			    fmWorkshop:
			    {
					
				}
				
		    },
		    computed: 
		    {
//		    	citytitle:function() 
//	        	{
//	        		console.log("this.fmWorkshop.cityname="+this.fmWorkshop.cityname);
//	        			var strRet = "";
//	        		if(this.fmWorkshop.cityname != "" && this.fmWorkshop.cityname != undefined)
//					{
//						strRet = this.fmWorkshop.cityname + "," + this.fmWorkshop.provname;
//						console.log("citytitle=" + strRet);
//						if(strRet == ",")
//						{
//							strRet = "请选择城市...";
//						}
//					}
//					else
//					{
//						strRet = "请选择城市...";
//					}
//		            return strRet;
//	        		}
//	        		,
//	        		areatitle:function() 
//	        		{
//		            console.log("this.fmWorkshop.areaname=" + this.fmWorkshop.areaname);
//					console.log("this.fmWorkshop.tareaname=" + this.fmWorkshop.tareaname);
//					var strRet = "";
//					if(this.fmWorkshop.areaname != "" && this.fmWorkshop.areaname != undefined)
//					{
//						strRet = this.fmWorkshop.areaname + ",";				
//					}
//					else
//					{
//						strRet = ",";
//					}
//					
//					if(this.fmWorkshop.tareaname != "" && this.fmWorkshop.tareaname != undefined)
//					{
//						strRet += this.fmWorkshop.tareaname;				
//					}
//					
//					console.log("theVue.fmWorkshop.areatitle=" + strRet);
//					if(strRet == undefined || strRet == "" || strRet == ",")
//					{
//						strRet = "请选择辖区...";
//					}
//					return strRet;
//			    }
	    	}		
		});
		
		theVue.$watch('fmWorkshop', function (val) 
		{
//			if(!isNumber(this.fmWorkshop.gpsx))
//			{
//				mui.toast("地理位置信息不正确");
//				this.fmWorkshop.gpsx = 0;
//			}
//			
//		 	if(!isNumber(this.fmWorkshop.gpsy))
//			{
//				mui.toast("地理位置信息不正确");
//				this.fmWorkshop.gpsy = 0;
//			}
		});
	
		
		//got all msg
		document.addEventListener('gotmsg', function(event) 
		{
//			if(event.detail.msg == "setgps")
//			{
//				theVue.fmWorkshop.gpsx = event.detail.jd; 
//			    	theVue.fmWorkshop.gpsy = event.detail.wd;
//			    	var map = showMap("divMap","",true,event.detail.jd,event.detail.wd,function(p_jd,p_wd){	});
//			    	var point = new BMap.Point(event.detail.jd, event.detail.wd);
//			    var marker = new BMap.Marker(point);
//			    map.addOverlay(marker);
//			}
//			
//			if(event.detail.msg == "setcity")
//			{
//				//alert(event.detail.curCity.areaname);
//				theVue.fmWorkshop.areacode = event.detail.curCity.areacode; 
//			    theVue.fmWorkshop.cityname = event.detail.curCity.areaname;
//			    theVue.fmWorkshop.provname = event.detail.curCity.provname;
//			    
//			 
//				g_jsonData.putData("curCity",event.detail.curCity.areaname);
//				//在修改了本页所在城市后设置本页地图中心城市
//				showMap("divMap",event.detail.curCity.areaname,false,0,0,function(p_jd,p_wd){});
//				//设置本页配送区域初始化数据
//				//if(theVue.fmWorkshop.ltTradeAreas == null || theVue.fmWorkshop.ltTradeAreas.length == 0)
//				//{
//					genpost('/zdm/AppApi/Search/TradeAreaList',
//						{AreaCode:event.detail.curCity.areacode},
//						function(data)
//						{
//							theVue.fmWorkshop.ltTradeAreas = data;
//						}
//					);
//				//}
//			}
		});
		
		
		sespost('/zdm/AppApi/Merchant/getMerInfoForWorkTime',
		{},
		function(workData)
		{
			workData.muiactive = "";
			if(workData.state == 1)
			{
				workData.muiactive = "mui-active";
			}
			
			theVue.fmWorkshop = workData;
			
			//alert(theVue.fmWorkshop.muiactive);
		});
		
		</script>
		
			
	</body>

</html>